<template>
  <div id="case-start">
    <Steps :current="currentIndex">
      <Step :title="currentIndex==0?'进行中':'完成'"
            content="填写课程信息"></Step>
      <Step :title="currentIndex==1?'进行中':currentIndex>1?'完成':'待进行'"
            content="选择双方队员"></Step>
      <Step :title="currentIndex==2?'进行中':currentIndex>2?'完成':'待进行'"
            content="选择课程公告"></Step>
      <Step :title="currentIndex==3?'进行中':'待进行'"
            content="选择课前调查问卷"></Step>
    </Steps>
    <div class="step1"
         v-if="currentIndex==0">
      <div class="coure-detail">
        <span>课程名称</span>
        <Input placeholder="Enter name"
               v-model="courseData.courseName"
               style="width: auto" />
      </div>
    </div>
    <div class="step2"
         v-if="currentIndex==1">
      <div class="coure-detail">
        <Card>
          <div class="drag-box-card">

            <!-- 切记设置list1和list2属性时，一定要添加.sync修饰符 -->
            <drag-list :list1.sync="list1"
                       :list2.sync="list2"
                       :list3.sync="list3"
                       :dropConClass="dropConClass"
                       @on-change="handleChange">
              <h3 slot="left-title">队员列表</h3>
              <Card class="drag-item"
                    slot="left"
                    slot-scope="left">
                <img width="20"
                     height="20"
                     style="vertical-align: middle;"
                     :src="left.itemLeft.photo"> {{ left.itemLeft.name }}
              </Card>
              <h3 slot="middle-title">红方队员</h3>
              <Card class="drag-item"
                    slot="middle"
                    slot-scope="middle">
                <img width="20"
                     height="20"
                     style="vertical-align: middle;"
                     :src="middle.itemMiddle.photo"> {{ middle.itemMiddle.name }}
              </Card>
              <h3 slot="right-title">蓝方队员</h3>
              <Card class="drag-item"
                    slot="right"
                    slot-scope="right">
                <img width="20"
                     height="20"
                     style="vertical-align: middle;"
                     :src="right.itemRight.photo"> {{ right.itemRight.name }}
              </Card>
            </drag-list>

          </div>
          <!-- <div class="handle-log-box">
                  <h3>操作记录</h3>
                  <div class="handle-inner-box">
                    <p v-for="(item, index) in handleList"
                       :key="`handle_item_${index}`">{{ item }}</p>
                  </div>
                </div>
                <div class="res-show-box">
                  <pre>{{ list1 }}</pre>
                </div>
                <div class="res-show-box">
                  <pre>{{ list2 }}</pre>
                </div>
                <div class="res-show-box">
                  <pre>{{ list3 }}</pre>
                </div> -->
        </Card>
      </div>
    </div>
    <div class="step3"
         v-if="currentIndex==2">
      <div class="coure-detail">
        <div>添加课程公告</div>
        <Input v-model="courseData.notice"
               type="textarea"
               :rows="4"
               placeholder="请填写教学公告" />
      </div>
    </div>
    <div class="step4"
         v-if="currentIndex==3">
      <div class="coure-detail">
        <div>课前问卷选择</div>
        <RadioGroup v-model="courseData.questionnaireId"
                    vertical>
          <Radio :label="item.questionnaireId"
                 v-for="(item,index) in questionnaireSelectOptions"
                 :key="index">
            <span>{{item.questionnaireName}}</span>
          </Radio>
        </RadioGroup>
      </div>
    </div>
    <div class="btn-wrap">
      <Button @click="prev"
              v-if="currentIndex>0">上一步</Button>
      <Button @click="next"
              type="primary">{{currentIndex==3?'完成':'下一步'}}</Button>
    </div>
  </div>
</template>
<script>
import DragList from '_c/drag-list'
import { mapState } from 'vuex'
import { getJointcaseTeachersInfo, getJointcaseQuestionnaireInfo, saveJointcaseNewCourseInfo } from '@/api/management.js'
export default {
  data () {
    return {
      currentIndex: 0,
      list1: [
        {
          "name": "张三",
          "id": 10
        },
        {
          "name": "李四",
          "id": 20
        },
        {
          "name": "王某某",
          "id": 30
        },
        {
          "name": "张某",
          "id": 40
        },
        {
          "name": "赵某",
          "id": 50
        },
        {
          "name": "孙某",
          "id": 60
        },
        {
          "name": "周某",
          "id": 60
        },
        {
          "name": "吴某",
          "id": 60
        }
      ],
      list2: [
      ],
      list3: [],
      dropConClass: {
        left: ['drop-box', 'left-drop-box'],
        middle: ['drop-box', 'middle-drop-box'],
        right: ['drop-box', 'right-drop-box']
      },
      handleList: [],
      teacherSelectOptions: [
        {
          id: 1,
          label: '张三'
        },
        {
          id: 2,
          label: '李四'
        },
        {
          id: 3,
          label: '王五'
        },
        {
          id: 4,
          label: '赵六'
        }
      ],
      questionnaireSelectOptions: [],
      courseData: {
        "courseName": "",
        "fightagainstPersonnelList": [
          {
            "fightagainFormation": "",
            "personId": 0
          }
        ],
        "oldCourseId": this.$route.params.courseId,
        "questionnaireId": 0,
        "teacherId": 0,
        "notice": ''
      }
    }
  },
  computed: {
    ...mapState({
      hasGetInfo: state => state.user.hasGetInfo,
      userName: state => state.user.userName,
      name: state => state.user.name,
      userId: state => state.user.userId,
      avatorImgPath: state => state.user.avatorImgPath,
      roleName: state => state.user.roleName,
      roleId: state => state.user.roleId,
    }),
  },
  mounted () {
    this.getList()
  },
  methods: {
    prev () {
      this.currentIndex--
    },
    next () {
      switch (this.currentIndex) {
        case 0:
          if (this.courseData.courseName) {
            this.currentIndex++
          } else {
            this.$Message.warning('请填写课程名称')
          }
          break;
        case 1:
          if (this.list2.length > 0 && this.list3.length > 0) {
            this.currentIndex++
          } else if (this.list2 == 0) {
            this.$Message.warning('请选择红方队员')
          } else if (this.list3 == 0) {
            this.$Message.warning('请选择蓝方队员')
          }
          break;
        case 2:
          if (this.courseData.notice != '') {
            this.currentIndex++
          } else {
            this.$Message.warning('请填写教学公告')
          }
          break;
        case 3:
          if (this.courseData.questionnaireId != '') {
            let arr = []
            this.list2.forEach(element => {
              arr.push({
                personId: element.id,
                fightagainFormation: 1
              })
            });
            this.list3.forEach(element => {
              arr.push({
                personId: element.id,
                fightagainFormation: 2
              })
            });
            this.courseData.fightagainstPersonnelList = arr
            this.courseData.teacherId = this.userId
            saveJointcaseNewCourseInfo(this.courseData).then(res => {
              if (res.data.data) {
                this.$Message.success(res.data.data);
                this.currentIndex = 0
                this.$emit('createCourseDone')
              }
            })
          } else {
            this.$Message.warning('请选择问卷')
          }
          break;
        default:
          this.currentIndex++
          break
      }

    },
    handleChange ({ src, target, oldIndex, newIndex }) {
      this.handleList.push(`${src} => ${target}, ${oldIndex} => ${newIndex}`)
    },
    getList () {
      getJointcaseTeachersInfo().then(res => {
        if (res.data.teachersList.length > 0) {
          this.teacherSelectOptions = res.data.teachersList
          this.teacherSelectOptions.map((item) => {
            item.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') + 'images/photo/' + item.photo
          })
        }
        if (res.data.studentsList.length > 0) {
          this.list1 = res.data.studentsList
          this.list1.map((item) => {
            item.photo = process.env.API_ROOT.replace('wisdom-classroom/', '') + 'images/photo/' + item.photo
          })
        }
      })
      getJointcaseQuestionnaireInfo().then(res => {
        if (res.data.length > 0) {
          this.questionnaireSelectOptions = res.data
        }
      })
    }
  },
  watch: {},
  components: {
    DragList
  }
}
</script>
<style lang="scss">
#case-start {
  width: 100%;
  height: 100%;
  .coure-detail {
    text-align: center;
    margin: 10px 0;
    .teacher-select-wrap {
      width: 200px;
      text-align: left;
      margin: 0 auto;
    }
    .ivu-radio-group {
      text-align: left;
    }
  }
  .btn-wrap {
    text-align: center;
  }
  .ivu-card-body {
    padding: 5px;
  }
  .drag-box-card {
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: left;
    .drag-item {
      margin: 10px;
    }
    h3 {
      padding: 10px 15px;
    }
    .drop-box {
      border: 1px solid #eeeeee;
      height: 300px;
      border-radius: 5px;
      overflow: auto;
    }
    .left-drop-box {
      margin-right: 10px;
    }
    .middle-drop-box {
      margin-right: 10px;
    }
    .right-drop-box {
      //
    }
  }
  .handle-log-box {
    display: inline-block;
    margin-left: 20px;
    border: 1px solid #eeeeee;
    vertical-align: top;
    width: 200px;
    height: 500px;
    h3 {
      padding: 10px 14px;
    }
    .handle-inner-box {
      height: calc(100% - 44px);
      overflow: auto;
      p {
        padding: 14px 0;
        margin: 0 14px;
        border-bottom: 1px dashed #eeeeee;
      }
    }
  }
  .res-show-box {
    display: inline-block;
    margin-left: 20px;
    border: 1px solid #eeeeee;
    vertical-align: top;
    width: 350px;
    height: 400px;
  }
}
</style>
